
window.addEventListener('load',function() {

    var course_wrap = document.querySelector('.course-wrap');
    var focus = course_wrap.querySelector('.focus');
    var arrow_l = focus.querySelector('.arrow-l');
    var arrow_r = focus.querySelector('.arrow-r');
    var list = focus.querySelector('.list');
    var list_one = list.querySelector('.list-one');
    var focus_first_box = document.querySelector('.focus-first-box');
    var focus_first_box_title = focus_first_box.querySelector('.title');
    var focus_first_box_brief = focus_first_box.querySelector('.brief');
    var focus_first_box_desc_box = focus_first_box.querySelector('.desc-box');
    var focus_first_box_descs =focus_first_box_desc_box.querySelectorAll('.desc');
    var focus_box = document.querySelector('.focus-box');
    // var focus_box_transfer = document.querySelector('.focus-box-transfer');
    var focus_box_mains = document.querySelectorAll('.focus-box-main');
    var focus_box_main = document.querySelector('.focus-box-main');
    var focus_box_main_titles = document.querySelectorAll('.box-title');
    var focus_box_main_title = focus_box_main.querySelector('.box-title');
    var focus_box_main_briefs = document.querySelectorAll('.box-brief');
    var focus_box_main_brief = focus_box_main.querySelector('.box-brief');
    
    var arr_focus = new Array();//创建新的数组
 
    // 获取后台数据     
        axios.get('http://120.24.80.83:3000/banners').then(res=>{
        arr_focus = arr_focus.concat(res.data.data);//获得数据数组
    
          // 自定义生成ul
          for(var i = 0; i < Math.ceil((arr_focus.length -3)/2)/3; i++) {
              var list_ul = document.createElement('ul');
              list_ul.className='data-list-ul';
              list.appendChild(list_ul);
              var lists = list.querySelectorAll('ul');
         }

         for(var i=1;i<lists.length;i++) {
          lists[i].className ='data-list-ul';
         }


        //自定义生成分框li
        var list_ul_li_box = arr_focus.length - 3;
        for(var i = 0; i < Math.ceil((arr_focus.length -3)/2); i++) {
            if(list_ul_li_box >=3) {
                for(var j=0;j<3;j++) {
                  var li = document.createElement('li');
                  lists[i+1].appendChild(li);
                }
                list_ul_li_box-=6;
            } else if(list_ul_li_box==2) {
                for(var j=0;j<2;j++) {
                  var li = document.createElement('li');
                  lists[i+1].appendChild(li);
                }
                list_ul_li_box-=4;
            } else if(list_ul_li_box==1) {
                var li = document.createElement('li');
                  lists[i+1].appendChild(li);
                  list_ul_li_box-=2;
            }
        }

        var lis = list.querySelectorAll('li');

       // 自定义生成focus-box
        for(var i = 2; i < lis.length ; i++) {
              var box = document.createElement('div');
              box.className = 'focus-box';
              lis[i].appendChild(box);  
        }
      
        var focus_box = document.querySelector('.focus-box');
        var focus_boxs = document.querySelectorAll('.focus-box');
       
        // //命名
        // for(var i=1 ; i < focus_boxs.length;i++) {
        //     focus_boxs[i].className = 'focus-box focus-box-transfer';
        // }

       //创建li里面的focus-box-main
        function setBox() {
                    var box = document.createElement('div');
                    box.className = 'focus-box-main';
                    focus_boxs[i].appendChild(box);
        } 
        var focus_main_box_num = arr_focus.length-3;
        for(var i = 1 ; i < focus_boxs.length; i++) {
            if(focus_main_box_num >= 2) {
                for(var j = 0; j < 2 ; j++){
                    setBox();
                } 
                focus_main_box_num-=2;
            }  else if(focus_main_box_num == 1){
                    setBox();
                     break;
                    }   
        }
      
        var focus_box_main = document.querySelector('.focus-box-main');
        var focus_box_mains = document.querySelectorAll('.focus-box-main');
         console.log(focus_box_mains.length);
    
        //  for(var i=0;i<focus_box_mains.length;i++) {
        //     if((i%2) !==0) {
        //         focus_box_mains[i].style.marginTop='16px';
        //     }
        //  }

        // focus-box-main 里面的 title和brief盒子
        for(var i = 2; i< focus_box_mains.length; i++) {
            var box1 = document.createElement('div');
            box1.className = 'box-title';
            focus_box_mains[i].appendChild(box1);
            var box2 = document.createElement('div');
            box2.className = 'box-brief';
            focus_box_mains[i].appendChild(box2);
        }
      
    var focus_box_main_titles = document.querySelectorAll('.box-title');
    var focus_box_main_title = focus_box_main.querySelector('.box-title');
    var focus_box_main_briefs = document.querySelectorAll('.box-brief');
    var focus_box_main_brief = focus_box_main.querySelector('.box-brief');

    //第一个大盒子
        focus_first_box.style.background = 'url('+arr_focus[0].pcLargeImage+')' ;
        focus_first_box_title.innerHTML =  arr_focus[0].title ;
        focus_first_box_brief.innerHTML = arr_focus[0].brief ;
      
        for(var i =0; i< focus_first_box_descs.length; i++) {
            for(var k in arr_focus[0].brightPoints) {
                focus_first_box_descs[i].innerHTML =  arr_focus[0].brightPoints[i];
             }
        }
    
    //自定义属性
    for(var i = 0; i < focus_box_main_briefs.length ; i++) {
            focus_box_main_titles[i].setAttribute('data-index-title',i+1);
            focus_box_main_briefs[i].setAttribute('data-index-brief',i+1);
            focus_box_mains[i].setAttribute('data-index-main',i+1);
        }
    // 获取数据
        for(var i = 0; i < arr_focus.length-1;i++) {
           
            // var title_index = focus_box_main_titles[i-1].getAttribute('data-index-title');
            // var brief_index = focus_box_main_briefs[i-1].getAttribute('data-index-brief');
            // var main_index = focus_box_mains[i-1].getAttribute('data-index-main');
            if( focus_box_main_titles[i].getAttribute('data-index-title') == i+1) {
             focus_box_main_titles[i].innerHTML = arr_focus[i+1].title;
            };
            if(focus_box_main_briefs[i].getAttribute('data-index-brief') == i+1) {
             focus_box_main_briefs[i].innerHTML = arr_focus[i+1].brief;
            };
            if(focus_box_mains[i].getAttribute('data-index-main') == i+1) {
             focus_box_mains[i].style.background = 'url('+arr_focus[i+1].pcLargeImage+')' ;
       
            };
        }; 

    //克隆第一张图
     var first = list.children[0].cloneNode(true);
     list.appendChild(first);
     var second = list.children[1].cloneNode(true);
     list.appendChild(second);
     
     var focus_box_transfer = document.querySelector('.focus-box-transfer');
     var focus_box_transfers = document.querySelectorAll('.focus-box-transfer');
     var list_lis = list.querySelectorAll('li');
     var list_uls = list.querySelectorAll('ul');

     for(var i=2;i<list_lis.length;i++) {
         list_lis[i].style.transform = 'scale(.9)';
         list_lis[i].style.transformOrigin='left';
         list_lis[i].style.opacity='.16';
     }
    //  for(var i = 0; i < list_uls.length ; i++) {
    //     console.log(list_uls[i]);
    //     list_uls[i].setAttribute('data-focus-index',i);
    //  }

     var data_list_ul=document.querySelector('.data-list-ul'); //点击按钮移动的距离
    //  var focusWidth = data_list_ul.offsetWidth; //点击按钮移动的距离
    var focusWidth = 1075;
  
    
     var num = 0; // 当前为第一张图片
     var flag = true; //节流阀
    
     arrow_r.addEventListener('click',function() {
        for(var j=0 ; j<list_lis.length;j++) {
            list_lis[j].style.transform = 'scale(.9)';
            list_lis[j].style.transformOrigin = 'left';
            list_lis[j].style.opacity = '.16';
            }

        if(flag) {
            
            flag = false;
            if(num == list.children.length - 2) {
             list.style.transitionDuration ="0";
             list.style.left = '16px';
             num = 0 ;
            }

            num++;
           
            arrow_move(arrow_r,list_uls,num);
            animate(list, -num * focusWidth ,function() {
             flag = true;
          });
        }
        
        if(num!=list.children.length-2) {
            arrow_l.style.display='block';
        } else {
            arrow_l.style.display='none';
        }
       
     })

     arrow_l.addEventListener('click',function() {

        for(var j=0 ; j<list_lis.length;j++) {
            list_lis[j].style.transform = 'scale(.9)';
            list_lis[j].style.transformOrigin = 'left';
            list_lis[j].style.opacity = '.16';
            }
        
         if(flag) {
             flag = false;
             //如果到了最后一张克隆的图片 ul快速还原为left;0
         if(num == 0) {
            num = list.children.length - 2;
            list.style.transitionDuration='0';
            list.style.left = - num * focusWidth + 'px';
          }

          num--;
            arrow_move(arrow_l,list_uls,num);
    
         animate(list, -num * focusWidth , function() {
             flag = true;
         });
        }
    })

    focus.addEventListener('mouseenter',function(){
        clearInterval(timer);
        timer=null;
    })

     focus.addEventListener('mouseleave',function() {
         timer = setInterval(function(){
             arrow_r.click();
         },3000)
     })

    //自动播放
    var timer = setInterval(function() {
        //手动调用点击事件 右键
        arrow_r.click();
    },3000);   
    
    

      }).catch(err=>{
          console.log(err);
      })

// 动画函数
function animate(obj, target,callback) {
  
    //不断点击按钮 导致多个定时器累加 速度加快
    //解决方案 每次调用函数前清除计时器 只保留当前一个计时器
       clearInterval(obj.timer);
       obj.timer = setInterval(function() {
    //offsetLeft不断变化 要卸载定时器里面
    // 缓动动画 加速减速
    // 把步长数改为整数 不要是小数
    // var step = Math.ceil((target - obj.offsetLeft) / 10);
    //考虑前进和倒退  前进往上取整/取大 倒退往下/取下
    var step = (target - obj.offsetLeft)/10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if(obj.offsetLeft == target) {
        clearInterval(obj.timer);// 动画停止=定时器停止
       //定时器结束后调用回调函数
       if(callback) {
           //调用函数
           callback();
       } 
    } else {
        obj.style.left = obj.offsetLeft + step + 'px';
    }
},20); 
}
// 左右按钮函数
function arrow_move(obj,arr,num) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
            var list_arr = arr[num];
            var list_li_arr = list_arr.querySelectorAll('li');

            for(var i=0;i <list_li_arr.length;i++) {
                list_li_arr[i].style.transform = 'scale(1)';
                list_li_arr[i].style.transfosrmOrigin = 'center';
                list_li_arr[i].style.opacity = '1';
            }
            for(var i=0;i<num; i++) {
               var list_arr_ul = arr[i];
               var list_arr_li = list_arr_ul.querySelectorAll('li');
               for(var j=0;j<list_arr_li.length;j++) {
                    list_arr_li[j].style.transformOrigin='right';
               }  
            }    
            },0)
            
        }



    //2.鼠标经过focus 显示隐藏的左右按钮
    arrow_l.addEventListener('mouseenter',function() {
        arrow_l.style.background ='rgba(26,45,63,.6)';
    })
    arrow_l.addEventListener('mouseleave',function() {
        arrow_l.style.background ='rgba(26,45,63,.2)';
    })
    arrow_r.addEventListener('mouseenter',function() {
        arrow_r.style.background ='rgba(26,45,63,.6)';
    })
    arrow_r.addEventListener('mouseleave',function() {
    arrow_r.style.background ='rgba(26,45,63,.2)';
    })

})